<template>
  <div class="streaming-demo p-6 max-w-4xl mx-auto">
    <h2 class="text-2xl font-bold mb-6 text-gray-800">聊天消息演示</h2>
    
    <div class="chat-container space-y-4">
      <ChatMessage
        v-for="message in demoMessages"
        :key="message.id"
        :message="message"
        @feedback="handleFeedback"
        @copy="handleCopy"
        @regenerate="handleRegenerate"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import ChatMessage from './ChatMessage.vue'
import type { ChatItem, Feedbacktype } from '@/types/app'

// 演示数据
const demoMessages = ref<ChatItem[]>([
  {
    id: 'user_1',
    content: '请帮我分析一下数据趋势',
    isAnswer: false,
    streaming: false,
    message_files: []
  },
  {
    id: 'ai_1',
    content: '我将使用工作流来分析您的数据。让我开始处理...',
    isAnswer: true,
    streaming: false,
    message_files: [],
    workflow_run_id: 'workflow_12345',
    workflowProcess: {
      status: 'succeeded' as any,
      tracing: [
        {
          node_id: 'start_001',
          node_type: 'start',
          status: 'succeeded'
        },
        {
          node_id: 'data_load_002',
          node_type: 'data_load',
          status: 'succeeded'
        },
        {
          node_id: 'analysis_003',
          node_type: 'trend_analysis',
          status: 'succeeded'
        },
        {
          node_id: 'result_004',
          node_type: 'result_output',
          status: 'succeeded'
        }
      ]
    }
  },
  {
    id: 'ai_2',
    content: '正在执行复杂的数据处理工作流...',
    isAnswer: true,
    streaming: false,
    message_files: [],
    workflow_run_id: 'workflow_67890',
    workflowProcess: {
      status: 'running' as any,
      tracing: [
        {
          node_id: 'start_001',
          node_type: 'start',
          status: 'succeeded'
        },
        {
          node_id: 'preprocess_002',
          node_type: 'data_preprocessing',
          status: 'succeeded'
        },
        {
          node_id: 'model_003',
          node_type: 'model_training',
          status: 'running'
        },
        {
          node_id: 'validate_004',
          node_type: 'model_validation',
          status: undefined
        }
      ]
    }
  },
  {
    id: 'ai_3',
    content: '抱歉，工作流执行过程中遇到了问题。',
    isAnswer: true,
    streaming: false,
    message_files: [],
    workflow_run_id: 'workflow_11111',
    workflowProcess: {
      status: 'failed' as any,
      tracing: [
        {
          node_id: 'start_001',
          node_type: 'start',
          status: 'succeeded'
        },
        {
          node_id: 'data_check_002',
          node_type: 'data_validation',
          status: 'failed'
        }
      ]
    }
  },
  {
    id: 'ai_4',
    content: '正在进行图像处理和分类任务...',
    isAnswer: true,
    streaming: false,
    message_files: [],
    workflow_run_id: 'workflow_22222',
    workflowProcess: {
      status: 'running' as any,
      tracing: [
        {
          node_id: 'input_001',
          node_type: 'input',
          status: 'succeeded'
        },
        {
          node_id: 'img_proc_002',
          node_type: 'image_processing',
          status: 'succeeded'
        },
        {
          node_id: 'feature_003',
          node_type: 'feature_extraction',
          status: 'running'
        },
        {
          node_id: 'classify_004',
          node_type: 'classification',
          status: undefined
        },
        {
          node_id: 'export_005',
          node_type: 'export',
          status: undefined
        }
      ]
    }
  },
  {
    id: 'ai_5',
    content: '正在执行复杂的数据科学工作流，包含多个处理步骤...',
    isAnswer: true,
    streaming: false,
    message_files: [],
    workflow_run_id: 'workflow_33333',
    workflowProcess: {
      status: 'running' as any,
      tracing: [
        {
          node_id: 'start_001',
          node_type: 'start',
          status: 'succeeded'
        },
        {
          node_id: 'data_load_002',
          node_type: 'data_load',
          status: 'succeeded'
        },
        {
          node_id: 'preprocess_003',
          node_type: 'data_preprocessing',
          status: 'succeeded'
        },
        {
          node_id: 'validate_004',
          node_type: 'data_validation',
          status: 'succeeded'
        },
        {
          node_id: 'transform_005',
          node_type: 'data_transform',
          status: 'running'
        },
        {
          node_id: 'analysis_006',
          node_type: 'statistical_analysis',
          status: undefined
        },
        {
          node_id: 'model_007',
          node_type: 'model_training',
          status: undefined
        },
        {
          node_id: 'evaluate_008',
          node_type: 'model_evaluation',
          status: undefined
        },
        {
          node_id: 'result_009',
          node_type: 'result_output',
          status: undefined
        }
      ]
    }
  }
])

// 事件处理
const handleFeedback = (messageId: string, feedback: Feedbacktype) => {
  console.log('反馈:', messageId, feedback)
}

const handleCopy = (content: string) => {
  console.log('复制内容:', content)
}

const handleRegenerate = (messageId: string) => {
  console.log('重新生成:', messageId)
}
</script>

<style scoped>
.streaming-demo {
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  min-height: 100vh;
}

.chat-container {
  background: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
</style> 